import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';
import { withRouter } from 'react-router-dom'

// 引入图片
import swiper1 from '@/assets/images/swiper-1.png'
/* import swiper2 from '@/assets/images/swiper-2.png'
import swiper3 from '@/assets/images/swiper-3.png' */

import connect from './connect'

@connect
@withRouter
class Swiper extends Component {
  state = {
    // data: [swiper1, swiper2, swiper3],
    imgHeight: 176,
  }

  render() {
    return (
      <Carousel
        autoplay={true}
        infinite={true}
      >
        {
          // 条件判断
          this.props.swiper.length > 0
            ?
            this.props.swiper.map(item => (
              <img
                key={'swiper-' + item.id}
                src={item.img}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onClick={() => {
                  this.props.history.push('/detail/' + item.id)
                }}
              />
            ))
            :
            <img src={swiper1} alt="" style={{ width: '100%', verticalAlign: 'top' }} />
        }
      </Carousel>
    );
  }
}

export default Swiper;
